<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body {
            margin: 0;
            color: #02b6fd;
        }
        /*全屏设置*/
        #app {
            height: 100%;
            weight: 100%;
            background-color: #c2e7b0;
        }
        .is-header {
            height: 75px !important;
           /* border: solid blue 1px;*/
            width: 100%;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 120px;

        }
        .is-header>div>a{
            text-decoration: none;
            color: #02b6fd;
            font-size: 18px;
            display: inline-block;
            margin-right: 20px;
        }
        /*main主体设置*/
        #is_main {
            background-image: url("img/back.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
            opacity: 1;
            height: 680px !important;
            color: #02b6fd;
           /* border: solid blue 1px;*/
            margin-top: 10px;
            padding-right: 0px !important;
            padding-left: 470px !important;
            padding-top: 100px;
        }
        /*#is_main:hover{
            background-image: linear-gradient(to right, green, purple);
        }*/
        /*main->div设置*/
        #is_main>div{
            border: solid 1px #409EFF;
            width:300px ;
            height: 80%;
            float: left;
            margin-right: 30px;
            text-align: center;
            background-color: #409EFF;
        }
        /*main->div:hover*/
        /*#is_main>div:hover{
            margin-top: 40px;
            height: 80%;
            width:400px ;
            margin-right: 120px;
            margin-left: 100px;
            transform: rotateY(15deg) ;
            transform: rotateZ(5deg) ;

        }*/
        /*footer*/
        .is-footer {
            height: 120px !important;
            margin-bottom: 0;
            background-color: white;
        }
        /*footer->div*/
        .fd{
            padding: 0px;
            margin-top: 20px;
            width: 80px;
            height: 80px;
            background-color: #5daf34;
            position: relative;
            animation-name: example;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-direction: alternate-reverse;
            border-radius: 4px;
        }
        .fd>p{
            display: inline-block;
            margin: 0;
            padding: 0 2px 0 8px;
            text-align: center;
            font-size: 60px;
        }
        @keyframes example {
            50% {background-color:#13ce66; left:0px;transform:rotateZ(360deg)}
        }
        .fM{
            float: right;
            height: 80px;
            width: 1500px;
            margin-top: 10px;
            margin-right: 100px;
            text-align: center
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="is-header">
            <div>
                <a href="person.html" >
                    <p style="font-size: 20px;font-weight: bolder;display: inline-block;text-shadow: 2px 2px 5px #c2e7b0;">环 绿 回 收</p>
                </a>
            </div>
            <div>
                <i class="el-icon-user"></i>
                <a href="login.html">登录</a>
                <i class="el-icon-user"></i>
                <a href="register1.html">注册</a>
            </div>
        </el-header>
        <el-main id="is_main" >
                    <div>
                            <img src="img/div.png" style="height: 25%;width: 50%;opacity: 0.5">
                                <p style="font-size: 30px;font-weight: bolder;color: white">背景</p>
                        <p style="color:white">今天，随着城市化的推进，经济的迅速发展，我们享受着生活带来的便利
                           同时，生活中的垃圾也渐渐的对我们的生活体验造成了影响，
                           比如，家里常常满了生活垃圾，自己却没有时间或者不想下楼丢垃圾；
                           又如商店里的垃圾，随着时间堆积越来越多，由于没有及时的处理，
                            影响了商店的业绩等等，为了给人们解决这一方面的烦恼，
                            我们团队综合这一背景开发了这个平台软件来处理生活中的垃圾问题
                        </p>
                        <span></span>
                    </div>
                <div >
                 <img src="img/div.png" style="height: 25%;width: 50%;opacity: 0.5">
                    <p style="font-size: 30px;font-weight: bolder;color:white">措施</p>
                    <p style="color:white">我们团队根据垃圾问题开发出这一软件平台，对垃圾的信息进行整理，
                    进而得出解决垃圾的方案，并让相关工作人员执行，进而解决垃圾问题，具体方案如下，<br>
                    1.需要在该平台上注册登录<br>
                    2.上传垃圾信息<br>
                    3.工作人员会根据信息得出解决方案<br>
                    4.实行解决方案，解决你的垃圾问题</p>
             </div>

             <div >
                 <img src="img/div.png" style="height: 25%;width: 50%;opacity: 0.5">
                 <p style="font-size: 30px;font-weight: bolder;color:white">目的</p>
                 <p style="color:white">
                     减少环境污染，<br>
                     净化生活环境，<br>
                     资源再次利用<br>
                     提高市民的生活体验<br>
                 </p>
             </div>
        </el-main>
        <el-footer class="is-footer">
            <div style="float: left" class="fd">
                <p>绿</p>
            </div>
            <div style="float: right " class="fd">
                <p>环</p>
            </div>
            <div class="fM">
                <span style="font-size: 10px;">
                    开发者：细胞重组团队<br>
                    队长：文国<br>
                    队员：春云、宇凡、云南、陈旭、罗航、佳明
                </span>
                <span>
                </span>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        }
    })
</script>
</html>